/**
 * @Author: ZFEason
 * @Date: 2023-07-11 14:00:01
 * @LastEditors: ZFEason
 * @LastEditTime: 2023-07-20 10:41:36
 * @FilePath: /ift-economy-network-h5/src/pages/storage-situation/index.tsx
 * @Description:
 */
import dayjs from "dayjs";
import { useEffect, useState, useRef } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import Styles from "./index.module.less";
import lockIcon from "@/assets/image/lock_icon.png";
import Cookies from "js-cookie";
import CustomDatePicker from "./components/CustomDatePicker";
import {
  getLeaderState,
  getTargetState,
  getJointStatistics,
  getSettleStatistics,
  getQueryParam,
  getSettleContribution,
  getDataTime
} from "@/service/projectDetail";
import {
  turnDept,
  realityName,
  isDistrictLeaders,
  isSuperManagement,
  normalUser,
  loginUserType,
  loginUserTypes,
} from "@/common/auth";
import { Picker } from "antd-mobile";

const Index: React.FC<any> = () => {
  const currentMonth = dayjs().month();
  let first = null;

  if (currentMonth == 0) {
    let date: any = dayjs()
      .subtract(1, "year")
      .startOf("month")
      .format("YYYY-MM")
      ?.split("-");
    first = new Date(date[0], date[1], 12);
  } else {
    let date: any = dayjs().startOf("month").format("YYYY-MM");
    first = new Date(date[0], date[1], 12);
  }
  const navigate = useNavigate();
  const [search] = useSearchParams();
  let nowDate = new Date();
  // 获取上个月的时间
  let nowMonth = nowDate.getMonth() - 1;
  let lastMonthDate = new Date(
    nowDate.getFullYear(),
    0,
    // nowMonth < 0 ? 0 : nowMonth
  );
  const [visible, setVisible] = useState(false)
  const [pickerValue, setPickerValue] = useState<(string | null)[]>(['1'])
  const [selectTime, setSelectTime] = useState<any>([lastMonthDate, nowDate]);
  const [time, setTime] = useState<any>([
    dayjs(lastMonthDate).format("YYYY-MM"),
    dayjs(nowDate).format("YYYY-MM"),
  ]);
  const [settleContributionInfo, setSettleContributionInfo] = useState<any>();
  const customDatePickerRef = useRef<any>(null);
  const customDatePickerRef1 = useRef<any>(null);
  const customDatePickerRef2 = useRef<any>(null);
  const showTimeCompont = (tRef: any) => {
    tRef.current.showPicker(true);
  };
  let enterDate = (time: any) => {
    setSelectTime(time);
    setTime([
      dayjs(time[0]).format("YYYY-MM"),
      dayjs(time[1]).format("YYYY-MM"),
    ]);
  };
  const [completeInfo, setCompleteInfo] = useState<any>({}); // 招商目标完成情况
  const [advance, setAdvance] = useState<any>({}); // 区领导推进情况

  const [firstData, setFirstData] = useState<any>({});

  const param = {
    dataType: loginUserType,
    ...(loginUserType == 2
      ? {
        deptName: turnDept,
      }
      : {}),
    startDate: time[0],
    endDate: time[1],
    ...(loginUserType == 1
      ? {
        leaderName: realityName,
      }
      : {}),
  };
  const getTargetInfo = async () => {
    const res: any = await getTargetState({
      ...param,
      dataType: loginUserType == 2 ? 2 : 1,
    });
    const { code, data } = res?.data;
    if (code == 0) {
      setCompleteInfo(data);
    }
  };

  const getLeaderInfo = async () => {
    const res: any = await getLeaderState(param);
    const { code, data } = res?.data;
    if (code == 0) {
      setAdvance(data);
    }
  };

  const queryTab: any = sessionStorage.getItem("GeneralSituationTab");
  const [tabNum, setTabNum] = useState<any>(Number(queryTab) || 0);
  const tabList = ["数据总览", "区领导", "招商单位", "招商小分队"];
  const changeTabs = (num: any) => {
    if (num === 0) {
      setSelectTime([lastMonthDate, nowDate]);
      setTime([
        dayjs(lastMonthDate).format("YYYY-MM"),
        dayjs(nowDate).format("YYYY-MM"),
      ]);
    } else {
      changeFilterParams(num, "statisticsType");
    }
    sessionStorage.setItem("GeneralSituationTab", num);
    setTabNum(num);
  };
  // 暂时隐藏引进落户数据
  // const filterTabs = ["洽谈对接", "引进落户"];
  const filterTabs = ["洽谈对接"];
  const [filterParams, setFilterParams] = useState<any>({
    tab: 1,
    statisticsType: Number(queryTab) > 0 ? Number(queryTab) : 1,
    time: [lastMonthDate, nowDate],
    cTime: [lastMonthDate, nowDate],//落户贡献筛选时间
    nTime: [lastMonthDate, nowDate],//洽谈对接情况筛选时间
  });
  const [tableData, setTableData] = useState<any>([]);
  const [sortList, setSortList] = useState<any>([
    {
      unit: "个",
      value: 0,
      label: "对接项目数",
      sort: 2,
    },
    {
      unit: "次",
      value: 0,
      label: "对接次数",
      sort: 0,
    },
    {
      unit: "次",
      value: 0,
      label: "走出去次数",
      sort: 0,
    },
    {
      unit: "百分点",
      value: 0,
      label: "GDP拉动预估",
      sort: 0,
    },
  ]);
  const changeFilterParams = (value: any, key: any) => {
    setFilterParams((params: any) => {
      params[key] = value;
      return { ...params };
    });
    key == "tab" &&
      setSortList((params: any) => {
        if (value == 1) {
          params = [
            {
              unit: "个",
              value: 0,
              label: "对接项目数",
              sort: 2,
            },
            {
              unit: "次",
              value: 0,
              label: "对接次数",
              sort: 0,
            },
            {
              unit: "次",
              value: 0,
              label: "走出去次数",
              sort: 0,
            },
            {
              unit: "百分点",
              value: 0,
              label: "GDP拉动预估",
              sort: 0,
            },
          ];
        } else {
          params = [
            {
              unit: "个",
              value: 0,
              label: "落户项目数",
              sort: 2,
            },
            {
              unit: "家",
              value: 0,
              label: "纳入四上",
              sort: 0,
            },
            {
              unit: "亿元",
              value: 0,
              label: "总营业收入",
              sort: 0,
            },
            {
              unit: "百分点",
              value: 0,
              label: "对GDP拉动预估",
              sort: 0,
            },
          ];
        }
        return [...params];
      });
  };

  useEffect(() => {
    // getLeaderInfo();
    getTargetInfo();
  }, [filterParams?.time]);

  const changeSort = (idx: any, val: any) => {
    setSortList((params: any) => {
      params = params.map((item: any, index: any) => {
        if (idx != index) {
          item.sort = 0;
        }
        return item;
      });
      if (val == params[idx].sort) {
        params[idx].sort = 0;
      } else {
        params[idx].sort = val;
      }
      return [...params];
    });
    let keysArr = [
      ["num", "jointNum", "outNum", "gdpRate"],
      ["num", "ssNum", "ysNum", "gdpRate"],
    ];
    let key: any = keysArr[filterParams.tab - 1][idx];
    setTableData((params: any) => {
      params = params.sort((x: any, y: any) => {
        if (val == 1) {
          return x[key] - y[key];
        }
        if (val == 2) {
          return y[key] - x[key];
        }
      });
      return [...params];
    });
  };
  const filterDatePickerRef = useRef<any>(null);
  const showFilterTimeCompont = () => {
    filterDatePickerRef.current.showPicker(true);
  };

  const enterFilterDate = (time: any, type: number) => {
    const isFirstFilter = type === 0
    setFilterParams((params: any) => {
      const config = {
        0: 'time',
        1: 'cTime',
        2: 'nTime'
      }
      params[config[type]] = time;
      if (isFirstFilter) params.cTime = time

      return { ...params };
    });
    if (isFirstFilter) enterDate(time)
  };

  const getJointStatisticsData = async (params: any) => {
    const res: any = await getJointStatistics(params);
    let { data, code } = res.data;
    if (code === 0 && data && data.length != 0) {
      const filterList = data.filter((itme: any) => { return itme.name !== '朱江' })
      let { num, jointNum, outNum, gdpRate, infoId, name } = filterList[0];
      setFirstData({ num, jointNum, outNum, gdpRate, infoId, name });
      setSortList((params: any) => {
        params = [
          {
            unit: "个",
            value: num,
            label: "对接项目数",
            sort: 2,
          },
          {
            unit: "次",
            value: jointNum,
            label: "对接次数",
            sort: 0,
          },
          {
            unit: "次",
            value: outNum,
            label: "走出去次数",
            sort: 0,
          },
          {
            unit: "百分点",
            value: gdpRate,
            label: "GDP拉动预估",
            sort: 0,
          },
        ];
        return [...params];
      });
      setTableData((params: any) => {
        params = filterList.splice(1).sort((x: any, y: any) => {
          return y.num - x.num;
        });
        return [...params];
      });
    }
  };
  const getSettleStatisticsData = async (params: any) => {
    const res: any = await getSettleStatistics(params);
    let { data, code } = res.data;
    if (code === 0 && data && data.length != 0) {
      let { num, ssNum, ysNum, gdpRate } = data[0];
      setSortList((params: any) => {
        params = [
          {
            unit: "个",
            value: num,
            label: "落户项目数",
            sort: 2,
          },
          {
            unit: "家",
            value: ssNum,
            label: "纳入四上",
            sort: 0,
          },
          {
            unit: "亿元",
            value: ysNum,
            label: "总营业收入",
            sort: 0,
          },
          {
            unit: "百分点",
            value: gdpRate,
            label: "对GDP拉动预估",
            sort: 0,
          },
        ];
        return [...params];
      });
      setTableData((params: any) => {
        params = data.splice(1).sort((x: any, y: any) => {
          return y.num - x.num;
        });
        return [...params];
      });
    }
  };
  const getSettleContributionData = async () => {
    let newParams: any = {
      startDate: dayjs(filterParams.time[0]).format("YYYY-MM"),
      endDate: dayjs(filterParams.time[1]).format("YYYY-MM"),
      ysDate: dayjs(filterParams.cTime[1]).format("YYYY-MM")
    };
    const res = await getSettleContribution(newParams)
    setSettleContributionInfo(res?.data?.data)
  }

  const rankingClass = ["one", "two", "three"];
  const [filterDateOptions, setFilterDateOptions] = useState<any>({
    max: "",
    min: "",
    filter: "",
  });
  const getQueryParamData = async () => {
    const res: any = await getQueryParam();
    let { code, data } = res.data;
    if (code === 0 && data) {
      let { year } = data;
      if (year && year.length != 0) {
        let max = new Date(nowDate.getFullYear(), nowDate.getMonth());
        let min = new Date(year[year.length - 1]);
        let filter = {
          year: (val: any) => {
            return year.includes(val.toString());
          },
          month: () => {
            return true;
          },
        };
        setFilterDateOptions((options: any) => {
          options.max = max;
          options.min = min;
          options.filter = filter;
          return { ...options };
        });
      }
    }
  };
  const jumpList = (item: any, index?: number, isOverView?: number) => {
    if (filterParams.tab == 2) return;
    const jumpTime = isOverView ? filterParams?.nTime : filterParams?.time
    let query: any = {
      alone: item.isMyself == 1 ? 2 : 3,
      starTime: dayjs(jumpTime[0])?.format("YYYY-MM"),
      endTime: dayjs(jumpTime[1]).format("YYYY-MM"),
      infoId: item.infoId,
    };
    if (index) {
      query = {
        ...query,
        selectType: index
      }
    }
    const jumpFunc = () => {
      let queryStr: any = [];
      for (let key in query) {
        queryStr.push(`${key}=${query[key]}`);
      }
      navigate(`/project-progress?${queryStr.join(`&`)}`);
    };
    if ([1, 3].includes(loginUserTypes(Cookies.get("user_deptName"))) || Cookies.get('user_isAdmin') == '1') {
      if (!item.hasOwnProperty("isMyself")) {
        query.alone = 2;
      } else if (item.isMyself == 0) {
        query.alone = 4;
      }
      jumpFunc();
    } else if (loginUserTypes(Cookies.get("user_deptName")) == 2) {
      if (item.isMyself == 1) {
        query.alone = 3;
        jumpFunc();
      }
      if (!item.hasOwnProperty("isMyself")) {
        query.alone = 3;
        jumpFunc();
      }
    }
  };
  useEffect(() => {
    getQueryParamData();
  }, []);
  useEffect(() => {
    if (tabNum !== 0) {
      let newParams: any = {
        startDate: dayjs(filterParams.time[0]).format("YYYY-MM"),
        endDate: dayjs(filterParams.time[1]).format("YYYY-MM"),
        statisticsType: filterParams.statisticsType,
      };
      if (filterParams.tab == 1) {
        getJointStatisticsData(newParams);
      } else {
        getSettleStatisticsData(newParams);
      }
    } else if (tabNum === 0) {
      let newParams: any = {
        startDate: dayjs(filterParams.nTime[0]).format("YYYY-MM"),
        endDate: dayjs(filterParams.nTime[1]).format("YYYY-MM"),
        statisticsType: 2,
      };
      getJointStatisticsData(newParams);
      getSettleContributionData()
    }
  }, [tabNum, filterParams]);

  const [intervalTime, setIntervalTime] = useState<any[]>([])
  const [operateTime, setOperateTime] = useState<string>('')
  
  useEffect(() => {
    getDataTimeList()
  }, [filterParams.time])
  useEffect(() => {
    if (intervalTime?.length > 0) setOperateTime(intervalTime[0].label)
  }, [intervalTime])

  const getDataTimeList = async() => {
    const params = {
      startDate: dayjs(filterParams.time[0])?.format('YYYY-MM'),
      endDate: dayjs(filterParams.time[1])?.format('YYYY-MM'),
    }
    const res:any = await getDataTime(params)
    const { data, code } = res?.data
    if(code == 0) {
      const time:any = data?.ysTimes?.map((item:any) => {
        return {
          label: `${dayjs(item)?.format('YYYY年')}01-${dayjs(item)?.format('MM月')}`,
          value: item
        }
      })
      setIntervalTime(time)
    }
  }
  return (
    <div className={Styles.situation_content}>
      <div className={Styles.tabs}>
        {tabList.map((item, index) => {
          return (
            <div
              className={`${Styles.tabItem} ${tabNum == index ? Styles.tabActive : ``
                }`}
              key={item}
              onClick={() => changeTabs(index)}
            >
              {item}
            </div>
          );
        })}
      </div>

      {tabNum === 0 && (
        <div className={Styles.overview}>
          <div className="d_between_center">
            <div className="fontsize_16 color_333 fw_500">招商项目总体情况</div>
            <div
              className={Styles.time_content}
              onClick={() => showTimeCompont(customDatePickerRef)}
            >
              <span style={{ marginLeft: "12px" }}>
                {time.length != 0 &&
                  `${dayjs(filterParams.time[0]).format("YYYY-MM")} 至 ${dayjs(
                    filterParams.time[1]
                  ).format("YYYY-MM")}`}
              </span>
              <img
                style={{ width: "20px", marginLeft: "6px" }}
                src={lockIcon}
              />
            </div>
          </div>
          <CustomDatePicker
            ref={customDatePickerRef}
            startTime={filterParams.time[0]}
            endTime={filterParams.time[1]}
            max={filterDateOptions.max || ""}
            min={filterDateOptions.min || ""}
            filter={filterDateOptions.filter || ""}
            enterDate={(time: any) => enterFilterDate(time, 0)}
          />
          <div className={Styles.completion_status}>
            <div className="color_666">落户项目数</div>
            <div className="mt_5 pb_12 color_333" style={{ display: "flex" }}>
              <span style={{ fontSize: '18px' }}>
                {completeInfo?.settleNum}&nbsp;
              </span>
              个，同比增速
              <span className={`${Styles.rate_top} ml_6`}>
                {completeInfo?.rate ? completeInfo?.rate : "-"}
              </span>
            </div>
            <div style={{ display: "flex" }}>
              <div style={{ flex: 1 }}>
                <div className="color_666">洽谈对接数</div>
                <div className="mt_5">
                  <span
                    className={Styles.is_hover_color}
                    onClick={() =>
                      navigate(
                        `/project-progress?alone=${(loginUserTypes(Cookies.get("user_deptName")) != 2 || Cookies.get('user_isAdmin') == '1')
                          ? 2
                          : 3
                        }&starTime=${time[0]}&endTime=${time[1]}`
                      )
                    }
                  >
                    {completeInfo?.neNum ?? "-"}&nbsp;
                  </span>
                  个
                </div>
              </div>
              <div style={{ flex: 1 }}>
                <div className="color_666">线索收集数</div>
                <div className="mt_5">
                  <span style={{ fontSize: '18px' }}>
                    {completeInfo?.clueNum ?? "-"}&nbsp;
                  </span>
                  个
                </div>
              </div>
            </div>
          </div>

          <div className="d_between_center mt_10">
            <div className="fontsize_16 color_333 fw_500">招引落户贡献</div>
            <div className="d_center_center">
              <span>经营时间：</span>
              <div
                className={Styles.time_content}
                style={{ width: '135px', textAlign: 'end', paddingRight: '10px' }}
                onClick={() => setVisible(true)}
              >
                <span style={{ marginLeft: "12px" }}>
                  {operateTime}
                </span>
                <img
                  style={{ width: "20px", marginLeft: "6px" }}
                  src={lockIcon}
                />
              </div>
            </div>
          </div>
          <Picker
            columns={[intervalTime]}
            visible={visible}
            onClose={() => {
              setVisible(false)
            }}
            value={pickerValue}
            onConfirm={(v: any) => {
              setPickerValue(v)
              const obj = intervalTime?.find((item: any) => item.value === v[0]) ?? {}
              setOperateTime(obj.label)
              setFilterParams((state: any) => ({ ...state, cTime: [filterParams.cTime[0], new Date(+(v[0]+'').substring(0,4),(+(v[0]+'').substring(4))-1)] }))
            }}
          />
          <CustomDatePicker
            ref={customDatePickerRef1}
            onlyEndTime
            startTime={filterParams.cTime[0]}
            endTime={filterParams.cTime[1]}
            max={filterParams.time[1] || ""}
            min={filterParams.time[0] || ""}
            filter={filterDateOptions.filter || ""}
            enterDate={(time: any) => enterFilterDate(time, 1)}
          />
          <div className={`${Styles.completion_status} ${Styles.contribution}`}>
            <div className="mr_20">
              <p className="color_666 mb_10">营业收入</p>
              <span className="fontsize_20">{settleContributionInfo?.ysNum ?? '-'}</span>
              <span className="color_666 ml_5">亿元</span>
            </div>
            <div>
              <p className="color_666  mb_10">对GDP拉动预估</p>
              <span className="fontsize_20">{settleContributionInfo?.gdpLd ?? '-'}</span>
              <span className="color_666 ml_5">个百分点</span>
            </div>
          </div>

          <div className="d_between_center mt_10">
            <div className="fontsize_16 color_333 fw_500">洽谈对接情况</div>
            <div
              className={Styles.time_content}
              onClick={() => showTimeCompont(customDatePickerRef2)}
            >
              <span style={{ marginLeft: "12px" }}>
                {time.length != 0 &&
                  `${dayjs(filterParams.nTime[0]).format("YYYY-MM")} 至 ${dayjs(
                    filterParams.nTime[1]
                  ).format("YYYY-MM")}`}
              </span>
              <img
                style={{ width: "20px", marginLeft: "6px" }}
                src={lockIcon}
              />
            </div>
          </div>
          <CustomDatePicker
            ref={customDatePickerRef2}
            startTime={filterParams.nTime[0]}
            endTime={filterParams.nTime[1]}
            max={filterDateOptions.max || ""}
            min={filterDateOptions.min || ""}
            filter={filterDateOptions.filter || ""}
            enterDate={(time: any) => enterFilterDate(time, 2)}
          />
          <div className={`${Styles.completion_status}`}>
            <div className={`${Styles.negotiation}`}>
              <div onClick={() => jumpList(firstData, 1, 1)}>
                <p className="color_666 mb_10">对接项目数</p>
                <span className={Styles.is_hover_color}>{sortList[0].value}</span>
                <span className="color_666 ml_5">个</span>
              </div>
              <div onClick={() => jumpList(firstData, 2, 1)}>
                <p className="color_666  mb_10">洽谈对接次数</p>
                <span className={Styles.is_hover_color}>{sortList[1].value}</span>
                <span className="color_666 ml_5">次</span>
              </div>
              <div onClick={() => jumpList(firstData, 3, 1)}>
                <p className="color_666  mb_10">走出去次数</p>
                <span className={Styles.is_hover_color}>{sortList[2].value}</span>
                <span className="color_666 ml_5">次</span>
              </div>
            </div>
            <div className="mt_10" onClick={() => jumpList(firstData, 4, 1)}>
              <p className="color_666  mb_10">对GDP拉动预估</p>
              <span className={Styles.is_hover_color}>{sortList[3].value}</span>
              <span className="color_666 ml_5">个百分点</span>
            </div>
          </div>

          {/* <div className="fontsize_16 color_333 fw_500 pt_12 mt_5">
          区领导推进情况
        </div>
        <div className={Styles.completion_status}>
          <div className="color_666">洽谈对接数</div>
          <div className="mt_5 pb_12 color_333" style={{ display: "flex" }}>
            {!isSuperManagement && <p className={Styles.border_line}>
              {isDistrictLeaders ? '我的' : '本单位'}
              alone 1仅看我的,2取消仅看我的，3选中列表页“仅看我的”，禁用勾选
              <span className={Styles.is_hover_color} onClick={() => navigate(`/project-progress?alone=${isDistrictLeaders ? 1 : 3}&starTime=${time[0]}&endTime=${time[1]}`)}>&nbsp;{advance?.neNum}&nbsp;</span>个
            </p>}
            <p className={`${!isSuperManagement && 'ml_12'}`}>
              全部<span className={`${normalUser ? Styles.is_default_color : Styles.is_hover_color}`} onClick={() =>{
                if(!normalUser){
                  navigate(`/project-progress?alone=2&starTime=${time[0]}&endTime=${time[1]}`)
                }
              }}>&nbsp;{advance?.allNeNum}</span>
            </p>
          </div>
          <div className="color_666">推动落地数</div>
          <div className="mt_5 pb_12 color_333" style={{ display: "flex" }}>
            {!isSuperManagement && 
              <p className={Styles.border_line}>
                {isDistrictLeaders ? '我的' : '本单位'}
                <span className={Styles.is_default_color}>&nbsp;{advance?.settleNum}&nbsp;</span>个
              </p>
            }
            <p className={`${!isSuperManagement && 'ml_12'}`}>
              全部<span className={Styles.is_default_color}>&nbsp;{advance?.allSettleNum}</span>
            </p>
          </div>
        </div> */}
        </div>
      )}
      {tabNum !== 0 && (
        <div className={Styles.detailInfo}>
          <div className={Styles.filterBlock}>
            <div className={Styles.filterTabs}>
              {filterTabs.map((item, index) => {
                return (
                  <div
                    className={`${Styles.filterTab} ${filterParams.tab == index + 1
                      ? Styles.filterTabActive
                      : ``
                      }`}
                    key={index}
                    onClick={() => changeFilterParams(index + 1, "tab")}
                  >
                    {item}
                  </div>
                );
              })}
            </div>
            <div
              className={Styles.filterTime}
              onClick={() => showFilterTimeCompont()}
            >
              <div className={Styles.filterTimeVal}>
                {filterParams.time.length != 0 &&
                  `${dayjs(filterParams.time[0]).format("YYYY-MM")} 至 ${dayjs(
                    filterParams.time[1]
                  ).format("YYYY-MM")}`}
              </div>
              <img className={Styles.filterTimeIcon} src={lockIcon} />
            </div>
            <CustomDatePicker
              ref={filterDatePickerRef}
              startTime={filterParams.time[0]}
              endTime={filterParams.time[1]}
              max={filterDateOptions.max || ""}
              min={filterDateOptions.min || ""}
              filter={filterDateOptions.filter || ""}
              enterDate={(time: any) => enterFilterDate(time, 0)}
            />
          </div>
          <div className={Styles.totalData}>
            {sortList.map((item: any, index: any) => {
              return (
                <div
                  className={Styles.totalDataItem}
                  key={index}
                  onClick={() => jumpList(firstData, Number(index) + 1)}
                >
                  <div className={Styles.totalDataInfo}>
                    <span className={Styles.totalNum}>{item.value}</span>
                    <span className={Styles.totalUnit}>{item.unit}</span>
                  </div>
                  <div className={Styles.totalDataText}>{item.label}</div>
                </div>
              );
            })}
          </div>
          <div className={Styles.tableWrapper}>
            <table className={Styles.table}>
              <thead>
                <tr>
                  <td>
                    <div className={Styles.trNames}>
                      {
                        ["区领导姓名", "责任部门", "招商小分队"][
                        filterParams.statisticsType - 1
                        ]
                      }
                    </div>
                  </td>
                  {sortList.map((item: any, index: any) => {
                    return (
                      <td key={index}>
                        <div className={Styles.trNames}>
                          <div className={Styles.trNamesInfo}>
                            <div className={Styles.trNamesLabel}>
                              {item.label}
                            </div>
                            <div className={Styles.trNamesUnit}>
                              ({item.unit})
                            </div>
                          </div>
                          <span className={Styles.sortIcons}>
                            <div
                              className={`${Styles.sortUp} ${item.sort == 1 ? Styles.sortActive : ``
                                }`}
                              onClick={() => changeSort(index, 1)}
                            ></div>
                            <div
                              className={`${Styles.sortDown} ${item.sort == 2 ? Styles.sortActive : ``
                                }`}
                              onClick={() => changeSort(index, 2)}
                            ></div>
                          </span>
                        </div>
                      </td>
                    );
                  })}
                </tr>
              </thead>
              <tbody>
                {tableData.map((item: any, index: any) => {
                  return (
                    <tr
                      key={index}
                      className={`${item.isMyself == 1 ? Styles.trActive : ``}`}
                      onClick={() => jumpList(item)}
                    >
                      <td>
                        <div className={Styles.TbodyInfo}>
                          <div className={Styles.TbodyName}>
                            <div
                              className={`${Styles.TbodyNameIdx} ${index <= 2 ? Styles[rankingClass[index]] : ``
                                }`}
                            >
                              {index + 1}
                            </div>
                            <div className={Styles.TbodyNameVal}>
                              {item.name}
                            </div>
                          </div>
                        </div>
                      </td>
                      <td>
                        <div className={Styles.TbodyInfo}>
                          <div className={Styles.TbodyNumber}>{item.num}</div>
                        </div>
                      </td>
                      <td>
                        <div className={Styles.TbodyInfo}>
                          <div className={Styles.TbodyNumber}>
                            {filterParams.tab == 1 ? item.jointNum : item.ssNum}
                          </div>
                        </div>
                      </td>
                      <td>
                        <div className={Styles.TbodyInfo}>
                          <div className={Styles.TbodyNumber}>
                            {filterParams.tab == 1 ? item.outNum : item.ysNum}
                          </div>
                        </div>
                      </td>
                      <td>
                        <div className={Styles.TbodyInfo}>
                          <div className={Styles.TbodyNumber}>
                            {item.gdpRate}
                          </div>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
};
export default Index;
